<template>
  <div>
    <el-row>
      <el-col>
  <h1 style="color: aqua;">
  <i class="el-icon-eleme"></i>
  {{sysname}}
  </h1>
      </el-col>
    </el-row>
      <el-row type="flex" justify="left">
    <el-button @click="toadd" type="primary" icon="el-icon-search">新增</el-button>
    </el-row>
    <el-row>
      <el-col>
        <el-table :data='list'>
    <el-table-column prop="title" label="[标题]"></el-table-column>
    <el-table-column prop="sellPoint" label="[卖点]"></el-table-column>
    <el-table-column prop="price" label="[价格]"></el-table-column>
    <el-table-column prop="note" label="[详情]"></el-table-column>

    <el-table-column label='[操作]' width="212">
      <template slot-scope="s">
    <el-button @click="toupdate(s.$index,s.row)" type='success' icon="el-icon-edit">修改</el-button>
    <el-button @click="del(s.$index,s.row)" type='danger' icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form lable-width="80px"  :model="m">
        <el-form-item label="标题:">
            <el-input  v-model='m.title'></el-input>
          </el-form-item>
          <el-form-item label="卖点:" >
              <el-input v-model='m.sellPoint'></el-input>
            </el-form-item>
            <el-form-item label="价格:" >
                <el-input  v-model='m.price'></el-input>
              </el-form-item>
                <el-form-item label="详情:">
                  <el-input type="textarea"  v-model='m.note'></el-input>
                </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
      <el-button type="success" @click="save">确定</el-button>
      <el-button type="danger" @click="close">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  //定义一个组件导出
  export default{
    name:"Item",
    data(){
      return{
        sysname:"京淘电商平台123",
        m:{
          title:'',
          sellPoint:'',
          price:'',
          note:'',
        },
        list:[
          {
            title:'javascript入门宝典',
            sellPoint:'这本书很畅销',
            price:'99',
            note:'这本是主流作家所写',
          },
          {
            title:'java是全球第一大语言',
            sellPoint:'java从业人最多',
            price:'188',
            note:'学java拿高薪',
          }
        ],
        dialogVisible: false,
        isUpdate:'',
        index:'',
      }
    },
    methods:{
      close(){
        this.dialogVisible=false;
      },
      toadd:function(){
        this.isUpdate=false;
        this.dialogVisible=true;
        this.m={};
      },
      toupdate:function(index,row){
        this.m=JSON.parse(JSON.stringify(row));
        this.isUpdate=true;
        this.dialogVisible=true;
        this.index=index;
      },
      del:function(index,row){
        this.list.splice(index,1);
      },
      save(){//新增和修改复用
      if(this.isUpdate){
        this.list.splice(this.index,1,this.m);
      }else if(this.m.title!=undefined){
        this.list.splice(0,0,this.m);
      }
         this.dialogVisible=false;
      }
    }
  }
</script>

<style>
  textarea{
    font-family: "微软雅黑";
  }
</style>
